<template>
	<view class="monitor-page">
		<!-- 横向可滚动 Tab（用 scroll-left 控制滚动位置） -->
		<scroll-view scroll-x class="tab-scroll" :scroll-left="scrollLeft" scroll-with-animation>
			<view class="tab-row" id="tab-row">
				<view v-for="(m, idx) in monitors" :key="m.id" :id="'tab-' + idx" class="tab-item"
					:class="{ active: idx === current }" @tap="onTabClick(idx)">
					{{ m.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 视频区域 -->
		<view class="video-container">
			<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay
				style="width: 100%; height: 500rpx;"></video>
			<view v-else class="placeholder">请选择监控点</view>
		</view>
	</view>
</template>



<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	const current = ref(0)
	const monitors = ref([])
	const currentVideoUrl = ref('')
	const scrollLeft = ref(0)

	async function fetchMonitors() {
		// 示例：很多项
		return Array.from({
			length: 30
		}).map((_, i) => ({
			id: i + 1,
			name: `监控点${i + 1}`,
			url: `https://example.com/video${i + 1}.mp4`
		}))
	}

	onMounted(async () => {
		monitors.value = await fetchMonitors()
		setActive(0)
	})

	function setActive(idx) {
		current.value = idx
		currentVideoUrl.value = monitors.value[idx]?.url || ''
		// 计算滚动位置，让激活项尽量居中
		nextTick(() => centerActiveTab(idx))
	}

	function onTabClick(idx) {
		setActive(idx)
	}

	function centerActiveTab(idx) {
		const query = uni.createSelectorQuery()
		// 容器与目标元素宽度与位置
		query.select('.tab-scroll').boundingClientRect()
		query.select('#tab-' + idx).boundingClientRect()
		query.select('#tab-row').boundingClientRect()
		query.exec(res => {
			const containerRect = res[0]
			const tabRect = res[1]
			const rowRect = res[2]
			if (!containerRect || !tabRect) return

			const containerWidth = containerRect.width
			const tabWidth = tabRect.width
			const tabLeftInPage = tabRect.left
			const containerLeftInPage = containerRect.left

			// 当前滚动容器已滚动的左距 = row.left - container.left （在部分端不直接可得）
			// 简化方案：用页面坐标差推算目标相对容器的可视左距
			const tabLeftRelativeToContainer = tabLeftInPage - containerLeftInPage

			// 希望目标居中：滚动到目标中心位于容器中心
			const desiredLeft = tabRect.left + tabWidth / 2 - containerLeftInPage - containerWidth / 2

			// 当前 scrollLeft + 目标在容器内的可视位置 = desiredLeft
			// 因为我们拿不到现有 scrollLeft 的精确值，这里用近似偏移：
			let targetScrollLeft = scrollLeft.value + desiredLeft

			// 边界限制
			const maxScroll = Math.max(0, rowRect.width - containerWidth)
			if (targetScrollLeft < 0) targetScrollLeft = 0
			if (targetScrollLeft > maxScroll) targetScrollLeft = maxScroll

			scrollLeft.value = Math.round(targetScrollLeft)
		})
	}
</script>



<style lang="scss" scoped>
	.monitor-page {
		background: #fff;
	}

	.tab-scroll {
		width: 100%;
		background: #f6f6f6;
	}

	.tab-row {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		/* 绝不换行 */
	}

	.tab-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 24rpx;
		margin: 12rpx 8rpx;
		border-radius: 28rpx;
		background: #ffffff;
		color: #333;
		font-size: 26rpx;
		border: 1rpx solid #ddd;
		white-space: nowrap;
		flex-shrink: 0;
		/* 防止压缩导致换行 */
	}

	.tab-item.active {
		color: #1677ff;
		border-color: #1677ff;
		background: #eaf3ff;
	}

	.video-container {
		margin-top: 20rpx;
	}

	.placeholder {
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 26rpx;
		border: 1rpx dashed #ddd;
	}
</style>